/**
* @author kobe
* @date   10/05/27
*/

(function(lf,r){

	var time = lf.utils.format(new Date(),"yyyy-MM-dd hh:mm"),
        ajax = lf.utils.ajax,
        appAlert = lf.bridgeJs.alert,
        log = lf.utils.log;

    var imgUrl = "../public/images/yue/";

    var his_info = {
		launch:'30',
		involved: '40'
	};

    //模拟数据
	var	user_info = {

	};


    var Avatar = React.createClass({
        componentDidMount:function(){

        },
    	render : function(){
    		var info = this.props.info;
    		return(
    			<div className="avatar">
	    			<div className="u-img"><img src="#" /></div>
	    			<button className="upload-avatar">上传头像</button>
    			</div>
    		);
    	}
    })


    var InfoCard = React.createClass({
    	render: function(){
    		var info = this.props.info;
    		return(
    			<div className="info-card">
    				<Avatar info={info}/>
    			</div>
    		)
    	}
    })

    var InfoList = React.createClass({
		componentDidMount:function(){
			var $choose = $(".c-btn");

			$choose.on('tap',function(){
				$(this).addClass('active').siblings().removeClass('active');
			})
		},
    	render:function(){
    		var info = this.props.info;
    		return(
    			<div className="info-list">
    				<form className="mui-input-group">
						<div className="mui-input-row">
							<label>昵称</label>
							<input type="text" className="mui-input-clear input-name" id="inputName" placeholder="请输入昵称" data-input-clear="5" />
							<span className="mui-icon mui-icon-clear mui-hidden"></span>
						</div>
						<div className="mui-table-view-cell">
							<label>性别</label>
							<div className="t-right choose" id="sex">
								<a className="man c-btn" href="javascript:;">男</a>
								<a className="women c-btn" href="javascript:;">女</a>
							</div>
						</div>
						<div className="mui-table-view-cell">
							<a className="mui-navigate-right">生日</a>
						</div>
						<div className="mui-table-view-cell">
							<label>情感状态</label>
							<div className="t-right choose" id="love">
								<a className="man c-btn" href="javascript:;">单身</a>
								<a className="women c-btn" href="javascript:;">已婚</a>
								<a className="women c-btn" href="javascript:;">热恋中</a>
							</div>
						</div>
					</form>

    			</div>
    		)
    	}
    })


	var BottomButton = React.createClass({
		componentDidMount:function(){
			var $reset = $('#reset'),
				$choose = $(".c-btn"),
				$inputName = $('#inputName');

			$reset.on("tap",function(){
				$choose.removeClass('active');
				$inputName.val('');
			})
		},
		render:function(){
			return(
				<div className="bottom-btn">
					<a className="reset b-btn" id="reset" href="javascript:;">重置</a>
					<a className="finish b-btn" href="javascript:;">完成</a>
				</div>
			)
		}
	})



    var Compose = React.createClass({
    	render:function(){
    		console.log(user_info.list_msg);
    		return(
    			<div className="yue-detail-edit">
    				<InfoCard />
    				<InfoList />
					<BottomButton />
    			</div>
    		)
    	}
    })

    r.render(
    	<Compose />,
    	document.getElementById('root'),function(){
			$('#root').css('background-color','#ededed');
		}
    );

})( liefeng, React)
